<template>
  <div class="b-resource overflow-auto h-full">
    <RecycleScroller class="h-full"
                     :items="list"
                     :item-size="48"
                     size-field="height"
                     :buffer="15"
                     key-field="id"
                     v-if="list && list.length > 0">
      <template v-slot="props">
        <div class="b-resource-item flex flex-col justify-between"
             @click.stop="handleToUrl(props.item)"
             :key="props.item.id">
          <ZTooltip :line="1"
                    :content="props.item.name">
            <span> {{props.item.name}}</span>
          </ZTooltip>

          <ZTooltip :line="1"
                    :content="props.item.description">
            <span> {{props.item.description}}</span>
          </ZTooltip>

        </div>
      </template>
    </RecycleScroller>

    <ZEmpty v-else
            description="No Data" />

    <model :showSetting="queryModelDefaultSetting.showSetting" />
    <model :showSetting="queryModelDefaultSetting.showSetting"
           :isUserCloneTemplate="isUserCloneTemplate"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :mappingForm="mappingFormSetting"
           @queryModelClosed="queryModelClosed" />
  </div>
</template>

<script>
import ZTooltip from '@/components/storybook/z-tooltip'
import ZEmpty from '@/components/storybook/z-empty'
import { PreviewContext } from '@/components/storybook/s-preview/preview-context'
import Snapshot from '@/components/storybook/mixins/snapshot'
import model from '@/components/gadget/query-model/query-model.vue'

export default {
  name: 'BResource',
  mixins: [Snapshot],
  components: {
    ZTooltip,
    ZEmpty,
    model
  },
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      isUserCloneTemplate: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: '',
          gadgetId: '',
          gadgetType: '',
          gadgetSetting: {},
          reuse: true
        }
      }
    }
  },
  methods: {
    async handleToUrl (item) {
      if (!item.type) return false
      switch (item.type) {
        case 'Dataset':
          this.$router.push({ path: `dataset-${item.id}`, query: { pageid: item.id, name: `${item.name}` } })
          this.closePay()
          break
        case 'Widget':
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const params = {
            gadgetId: item.gadget_id,
            includeSql: true
          }
          const { getReportSettingInfo } = this.$interface.reports
          const { data } = await getReportSettingInfo(params)
          const row = data.data
          this.queryModelDefaultSetting.dataInfo.businessId = row.businessId
          this.queryModelDefaultSetting.dataInfo.businessType = row.businessType
          this.queryModelDefaultSetting.dataInfo.gadgetId = row.gadgetId
          this.queryModelDefaultSetting.dataInfo.gadgetType = row.gadgetType
          this.queryModelDefaultSetting.dataInfo.gadgetSetting = null
          this.$nextTick(() => {
            this.$store.state.isWidget = true
            this.showQueryModel()
            loading.close()
          })
          break
        case 'Report':
          this.$router.push({
            path: `dashboard-${item.id}`,
            query: {
              pageid: item.id,
              name: item.name,
              layout: item.layoutType
            }
          })
          this.closePay()
          break
        case 'Bot':
          this.$router.push({ path: `bot-${item.id}`, query: { pageid: 'botdetail', botId: item.id, name: item.name } })
          this.closePay()
          break
        default:
      }
      try {
        let files = await this.getSnapshot({ id: item.id })

        PreviewContext.files = files
      } catch (error) {

      }
    },
    closePay () {
      this.$emit('close')
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    upgradeGadgetSetting () {
      this.$emit('upgradeGadgetSetting')
    },
    mappingFormSetting () {
      this.$emit('mappingFormSetting')
    }
  }
}
</script>

<style lang="scss" scoped>
.b-resource {
  &-item {
    height: 48px;
    cursor: pointer;
    padding: 9px 16px;
    border-bottom: 1px solid #f0f0f0;
    span:nth-of-type(1) {
      font-size: 14px;
      color: #161616;
      font-weight: 700;
    }
    span:nth-of-type(2) {
      font-size: 12px;
      color: #808080;
      font-weight: 700;
    }
  }
}
</style>
